<template>
	<view :class="['wrapper',titleList[type].wrapperClass]">
		<Head :title="titleList[type].title" leftIcon="left" type="detail" backgroundColor="transparent" color="#fff"
			:border="false">
		</Head>
		<view :class="['banner',titleList[type].bannerClass]">
			<image :src="titleList[type].bannerImg"></image>
		</view>
		<view class="serviceBox">
			<view class="serviceType">
				<view class="title">
					选择服务
				</view>
				<view class="serviceList clearfix">
					<view :class="activeIndex == index ? 'serviceItem ac' : 'serviceItem'"
						v-for="(item,index) in serviceList" :key="index" @click="handleChangeServiceItem(item,index)">
						<view v-if="item.recommend == 1" class="recomIcon"></view>
						<view class="t1">{{item.name}}</view>
						<view class="t2"><text>￥</text>{{item.expense1}}.{{item.expense2}}</view>
						<view class="t3">低至{{item.expense_avg}}</view>
						<view class="icon"></view>
					</view>
				</view>
			</view>
			<view class="payBox">

				<picker v-if="type != 'resume_package' && type != 'im' " :range="jobList" range-key="jobname"
					@change="handleJobSelect">
					<view class="payLine">
						<view class="label">职位名称</view>
						<view class="text">
							{{jobname}}
							<uni-icons type="right" size="15"></uni-icons>
						</view>
					</view>
				</picker>

				<picker v-if="type == 'job_refresh'" mode="date" fields="day" @change="handleRefresh">
					<!-- <xpPicker ref="xpPicker" v-if="type == 'job_refresh'" actionPosition="top" @confirm="handleRefresh"> -->
					<view class="payLine">
						<view class="label">开始刷新时间</view>
						<view class="text">
							<view class="color">{{orderParams.starttime == "" ? "请选择" : orderParams.starttime }}</view>
							<uni-icons type="right" size="15"></uni-icons>
						</view>
					</view>
					<!-- </xpPicker> -->
				</picker>
				<picker v-if="type == 'job_refresh'" :range="options_timerange" range-key="text"
					@change="handleTimerange">
					<view class="payLine">
						<view class="label">刷新间隔</view>
						<view class="text">
							<view class="color">{{refresh_timerange}}</view>
							<uni-icons type="right" size="15"></uni-icons>
						</view>
					</view>
				</picker>

				<view class="payLine" v-if="mySetmeal.service_added_discount > 0">
					<view class="label">专享折扣</view>
					<view class="text">增值服务{{ mySetmeal.service_added_discount }}折</view>
				</view>

				<checkbox-group @change="handleIsIntegralChange" v-if="enable_points_deduct == 1">
					<label>
						<view class="payLine border">
							<view class="label">{{ config.points_byname }}抵扣</view>
							<view class="text">
								可使用{{enable_points_deduct_points}}{{ config.points_byname }}抵扣{{enable_points_deduct_expense}}元
								<checkbox :checked="is_deduct" />
							</view>
						</view>
					</label>
				</checkbox-group>

				<radio-group @change="handleChangePaymentType" v-if="amount > 0">
					<!-- #ifdef MP-TOUTIAO || MP-WEIXIN -->
					<label>
						<view class="payLine">
							<view class="label wxIcon">微信支付</view>
							<view class="text">
								<radio value="wxpay" :checked="paymentType == 'wxpay'" />
							</view>
						</view>
					</label>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<label>
						<view class="payLine">
							<view class="label aliIcon">支付宝支付</view>
							<view class="text">
								<radio value="alipay" :checked="paymentType == 'alipay'" />
							</view>
						</view>
					</label>
					<!-- #endif -->
				</radio-group>
			</view>
		</view>

		<view class="btns">
			<view class="price">
				<text class="color1">应付金额：</text><text class="color2">￥{{amount}}</text>
			</view>
			<view class="btn">
				<Pay :paymentType="paymentType" :orderParams="orderParams" @handlePaySuccess="handlePaySuccess"
					@handlePayFail="handlePayFail">{{ amount == 0 ? "立即兑换" : "立即支付" }}</Pay>
			</view>
		</view>
	</view>
</template>

<script>
	import handlerHttpError from '@/utils/error';
	import http from '@/utils/http';
	import api from '@/api';
	import xpPicker from '../components/xp-picker/xp-picker.vue'
	import Pay from '@/components/Pay.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			Pay
		},
		data() {
			return {
				// 服务类型
				type: 'jobstick',
				// 标题列表
				titleList: {
					jobstick: {
						title: '职位置顶',
						bannerImg: require('@/service/static/img/jobstickBanner.png'),
						bannerClass: "jobstickBanner",
						wrapperClass: 'jobstick'
					},
					emergency: {
						title: '紧急招聘',
						bannerImg: require('@/service/static/img/emergencyBanner.png'),
						bannerClass: "emergencyBanner",
						wrapperClass: 'emergency'
					},
					resume_package: {
						title: '简历包',
						bannerImg: require('@/service/static/img/resumePackageBanner.png'),
						bannerClass: "resumePackageBanner",
						wrapperClass: 'resume_package'
					},
					job_refresh: {
						title: '智能刷新',
						bannerImg: require('@/service/static/img/jobRefreshBanner.png'),
						bannerClass: "jobRefreshBanner",
						wrapperClass: 'job_refresh'
					},
					im: {
						title: '职聊增值包',
						bannerImg: require('@/service/static/img/imBanner.png'),
						bannerClass: "imBanner",
						wrapperClass: 'im'
					},
					setmeal: {
						title: '套餐升级',
						bannerImg: require('@/service/static/img/imBanner.png'),
						bannerClass: "setmealBanner",
						wrapperClass: 'setmeal'
					},
					integral: {
						title: '购买积分',
						bannerImg: require('@/service/static/img/imBanner.png'),
						bannerClass: "integralBanner",
						wrapperClass: 'integral'
					}
				},
				// 服务列表
				serviceList: [],
				// 积分点数
				myPoints: 0,
				// 是否允许积分抵扣
				enable_points_deduct: 0,
				// 允许抵扣的积分数
				enable_points_deduct_points: 0,
				// 允许抵扣的金额
				enable_points_deduct_expense: 0,
				// 抵扣后金额
				after_deduct_expense: 0,
				//支付金额
				amount: '0.0',
				// 是否使用积分抵扣
				is_deduct: false,
				// 当前选择套餐
				activeIndex: 0,
				// 支付类型 微信支付/支付宝支付
				paymentType: 'wxpay',
				// 下订单参数
				orderParams: {
					service_type: '',
					service_id: '',
					deduct_points: '',
					payment: 'wxpay',
					jobid: '',
					starttime: '',
					timerange: ''
				},
				//职位列表
				jobList: [],
				// 职位名称
				jobname: '',
				// 间隔时间列表
				options_timerange: [],
				// 刷新时间文字
				refresh_timerange: '请选择',
				mySetmeal: {}
			};
		},
		components: {
			xpPicker
		},
		watch: {
			amount: function(newVal) {
				if (newVal == 0) {
					this.orderParams.payment = 'free'
				} else {
					this.orderParams.payment = 'wxpay'
				}
			}
		},
		computed: {
			...mapState(['config'])
		},
		created() {
			this.options_timerange = []
			for (let i = 1; i <= 12; i++) {
				this.options_timerange.push({
					text: i + '小时',
					value: i * 3600
				})
			}
			this.options_timerange.push({
				text: '24小时',
				value: 24 * 3600
			})
			this.options_timerange.push({
				text: '48小时',
				value: 48 * 3600
			})
		},
		onLoad(o) {
			if (o.jobid) {
				this.orderParams.jobid = o.jobid
			}
			this.type = o.type
			this.orderParams.service_type = this.type == 'job_refresh' ? 'refresh_job_package' : this.type
			this.getServiceList()
			this.getMysetmeal()
		},
		methods: {
			// 获取增值服务列表
			getServiceList() {
				http.get(api.company_servicelist, {
					type: this.type
				}).then(response => {
					let res = response.data
					if (res.code == 200) {
						this.serviceList = []
						let list = res.data.items
						// 计算 每次/每天 金额数量
						for (const iterator of list) {
							let expense_arr = iterator.expense.split('.')
							iterator.expense1 = expense_arr[0]
							iterator.expense2 = expense_arr[1]
							if (iterator.times !== undefined) {
								iterator.expense_avg = iterator.expense / iterator.times
								iterator.expense_avg = iterator.expense_avg.toFixed(2) + '元/次'
							} else if (iterator.days !== undefined) {
								iterator.expense_avg = iterator.expense / iterator.days
								iterator.expense_avg = iterator.expense_avg.toFixed(2) + '元/天'
							} else {
								iterator.expense_avg = iterator.expense / iterator.download_resume_point
								iterator.expense_avg = iterator.expense_avg.toFixed(2) + '元/点'
							}
							this.serviceList.push(iterator)
						}
						// 获取列表第一项 金额/积分/是否可以抵扣
						this.orderParams.service_id = list[0].id
						this.myPoints = res.data.member_points
						this.enable_points_deduct = list[0].enable_points_deduct
						this.enable_points_deduct_points = list[0].enable_points_deduct_points
						this.enable_points_deduct_expense = list[0].enable_points_deduct_expense
						this.after_deduct_expense = list[0].after_deduct_expense
						// 计算最终需要支付的金额
						this.old_amount = list[0].expense
						this.handlerFinalAmount()
						// 处理职位列表
						this.jobList = res.data.joblist
						if (this.jobList.length == 0) {
							this.jobname = '暂无职位'
						} else if (this.orderParams.jobid === undefined || !this.orderParams.jobid) {
							this.orderParams.jobid = this.jobList[0].id
							this.jobname = this.jobList[0].jobname
						} else if (this.orderParams.jobid && this.orderParams.jobid != '') {
							this.jobList.map(item => {
								if (item.id == this.orderParams.jobid) {
									this.jobname = item.jobname
								}
							})
						}
					}
				})
			},
			// 套餐
			getMysetmeal() {
				http.get(api.member_setmeal).then(res => {
					if (res.code == 200) {
						this.mySetmeal = res.data.info
					}
				})
			},
			// 计算金额
			handlerFinalAmount() {
				console.log(this.is_deduct)
				if (this.is_deduct) {
					this.amount = this.after_deduct_expense
				} else {
					this.amount = this.old_amount
				}
			},
			// 是否使用积分抵扣
			handleIsIntegralChange(e) {
				this.is_deduct = !this.is_deduct
				this.orderParams.deduct_points = this.is_deduct ? this.enable_points_deduct_points : 0
				this.handlerFinalAmount()
			},
			// 切换服务套餐
			handleChangeServiceItem(item, index) {
				// 重置积分抵扣
				this.is_deduct = false
				this.orderParams.deduct_points = 0

				this.activeIndex = index
				this.orderParams.service_id = item.id
				this.myPoints = item.member_points
				this.enable_points_deduct = item.enable_points_deduct
				this.enable_points_deduct_points = item.enable_points_deduct_points
				this.enable_points_deduct_expense = item.enable_points_deduct_expense
				this.after_deduct_expense = item.after_deduct_expense
				// 计算最终需要支付的金额
				this.old_amount = item.expense
				this.handlerFinalAmount()
			},
			//微信支付 支付宝支付切换
			handleChangePaymentType(e) {
				this.paymentType = e.detail.value
				this.orderParams.payment = this.paymentType
			},
			// 选择职位
			handleJobSelect(e) {
				let index = e.detail.value
				let item = this.jobList[index]
				this.jobname = item.jobname
				this.orderParams.jobid = item.id
			},
			// 刷新间隔
			handleTimerange(e) {
				let index = e.detail.value
				let item = this.options_timerange[index]
				this.orderParams.timerange = item.value
				this.refresh_timerange = item.text
			},
			// 开始刷新时间
			handleRefresh(e) {
				this.orderParams.starttime = e.detail.value
			},
			// 支付成功
			handlePaySuccess(res) {
				uni.navigateTo({
					url: '/commonViews/service/OrderList'
				})
			},
			// 支付失败
			handlePayFail() {
				uni.navigateTo({
					url: '/commonViews/service/OrderList'
				})
			}
		},

	}
</script>

<style lang="scss" scoped>
	.wrapper {
		width: 100%;
		height: 100%;
		position: relative;

		&.jobstick {
			background: url('@/service/static/img/jobstickBg.png') no-repeat top center / 100% auto;
		}

		&.emergency {
			background: url('@/service/static/img/emergencyBg.png') no-repeat top center / 100% auto;
		}

		&.resume_package {
			background: url('@/service/static/img/resumePackageBg.png') no-repeat top center / 100% auto;
		}

		&.job_refresh {
			//jobRefreshBg
			background: url('@/service/static/img/resumePackageBg.png') no-repeat top center / 100% auto;
		}

		&.im {
			background: url('@/service/static/img/imBg.png') no-repeat top center / 100% auto;
		}

		.banner {
			height: 231rpx;
			margin: 30rpx 36rpx 0;

			&.jobstickBanner {
				height: 310rpx;
			}

			&.emergencyBanner {
				height: 271rpx;
			}

			&.resumePackageBanner {
				height: 314rpx;
			}

			&.jobRefreshBanner {
				height: 300rpx;
			}

			&.imBanner {
				height: 231rpx;
			}

			image {
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		.serviceBox {
			height: calc(100% - 624rpx);
			padding-bottom: 30rpx;
			// background: red;
			overflow-y: auto;

			.serviceType {
				.title {
					color: #333;
					font-size: 32rpx;
					padding: 51rpx 36rpx 31rpx;
				}

				.serviceList {
					overflow-x: auto;
					white-space: nowrap;
					margin: 0 0 64rpx 36rpx;

					.serviceItem {
						display: inline-block;
						min-width: 230rpx;
						height: 286rpx;
						margin-right: 30rpx;
						border: 1rpx solid #D1A571;
						text-align: center;
						position: relative;
						padding: 42rpx 0 0 0;
						box-sizing: border-box;
						border-radius: 5rpx;

						.recomIcon {
							width: 59rpx;
							height: 59rpx;
							background: url('@/service/static/img/recommend.png') no-repeat center center / 100% 100%;
							position: absolute;
							left: 0;
							top: 0;
						}

						.t1 {
							color: #333333;
							font-size: 28rpx;
							height: 100rpx;
							line-height: 100rpx;
						}

						.t2 {
							height: 60rpx;
							line-height: 60rpx;
							// margin-top: 36rpx;
							color: #C73E32;
							font-size: 28rpx;
							margin-bottom: 24rpx;
						}

						.t3 {
							// margin-top: 32rpx;
							height: 60rpx;
							line-height: 60rpx;
							// padding: 20rpx 0;
							color: #999999;
							font-size: 26rpx;
						}

						.icon {
							position: absolute;
							right: 0rpx;
							bottom: 0rpx;
							width: 40rpx;
							height: 40rpx;
							display: none;
							background: url('@/service/static/img/serviceAc.png') no-repeat center center / 40rpx 40rpx;
						}

						&.ac {
							border: 1rpx solid #FD6260;
							background: #FEF5F5;

							.t3 {
								color: #fff;
								background: #FD6260;
							}

							.icon {
								display: block;
							}
						}
					}
				}
			}

			.payBox {
				margin: 0 36rpx;
				padding: 0 36rpx;
				box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(67, 12, 159, 0.13);

				.payLine {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 36rpx 0;

					&.border {
						border-bottom: 1rpx solid #ededed;
					}

					.label {
						color: #333;
						font-size: 28rpx;

						&.wxIcon {
							padding-left: 40rpx;
							background: url('@/service/static/img/wxPayIcon.png') no-repeat left center /31rpx 27rpx;
						}

						&.aliIcon {
							padding-left: 40rpx;
							background: url('@/service/static/img/aliPayIcon.png') no-repeat left center /26rpx 26rpx;
						}
					}

					.text {
						color: #333;
						font-size: 28rpx;
						display: flex;
						align-items: center;

						.color {
							color: #999;
						}
					}
				}
			}
		}

		.btns {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 30rpx 36rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top: 1rpx solid #ededed;

			.btn {
				flex-shrink: 0;
				color: #FFFFFF;
				font-size: 28rpx;
				background: #FD6260;
				padding: 15rpx 30rpx;
				border-radius: 10rpx;
			}

			.price {
				font-size: 28rpx;

				.color1 {
					color: #010000;
				}

				.color2 {
					color: #FF4030;
				}
			}
		}
	}
</style>